<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jsdemo</title>
    <style>
        html {
            background: radial-gradient(ellipse at center, #ef0e39 0%, black 100%);
            overflow: hidden;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<div id="bg">

</div>
<div class="btnbg">

    <div class="cs">

        <div class="htmleaf-container">

            <nav class="animenu">

                <button class="animenu__toggle">

                    <span class="animenu__toggle__bar"></span>

                    <span class="animenu__toggle__bar"></span>

                    <span class="animenu__toggle__bar"></span>

                </button>

                <ul class="animenu__nav" style=" text-align:center">

                    <li>

                        <a href="https://1123412185.qzone.qq.com/" target="_blank" title="我的空间">我的空间</a>

                    </li>

                    <li>

                        <a href="https://www.zelblog.com/" title="泽林博客" target="_blank">泽林博客</a>

                    </li>

                    <li>

                        <a href="https://github.com/CrazyNing98/jsdemo" target="_blank" title="Github">源码下载</a>


                    </li>

                </ul>

            </nav>

        </div>

        <div style="text-align: center;margin-top: 100px;">



            <br><br>

            <img src="https://cdn.iacblog.com/headphoto/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20181101001332.png" id="logo">

            <br><br>

            <!--<hr />-->

            <br><br>

            <p style="font-size:30px;">人生若只如初见、<br><br><a href="http://www.iacblog.com/" class="btn-slide" target="_blank"> <span class="circle"><i class="fa fa-rocket"></i></span> <span class="title">泽林博客</span> <span class="title-hover">My Blog</span> </a>

                <a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=1123412185" class="btn-slide2" target="_blank"> <span class="circle2"><i class="fa fa-download"></i></span> <span class="title2">联系我吧</span> <span class="title-hover2">Contact QQ</span></a>

            <p style="font-size:20px;"><p style="font-size:20px;"><br>

            <br>

            <br>

            <br>

            <br>

            <br>

            <div style="position:absolute;top:90%;left:50px;height:10px;width:600px;color:#E91E63;">



                <audio loop src="https://www.zelblog.com/music/音阙诗听%20-%20红昭愿.mp3" id="bgaudio" autoplay preload="auto">该浏览器不支持audio属性</audio>



                <script type="text/javascript">

                    document.getElementById('bgaudio').play();

                </script>


            </div>


        </div>
    </div>
</div>




</body>
<script>
    var refreshDuration = 5000;
    var refreshTimeout;
    var numPointsX;
    var numPointsY;
    var unitWidth;
    var unitHeight;
    var points;

    function onLoad()
    {
        var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('width',window.innerWidth);
        svg.setAttribute('height',window.innerHeight);
        document.querySelector('#bg').appendChild(svg);

        var unitSize = (window.innerWidth+window.innerHeight)/20;
        numPointsX = Math.ceil(window.innerWidth/unitSize)+1;
        numPointsY = Math.ceil(window.innerHeight/unitSize)+1;
        unitWidth = Math.ceil(window.innerWidth/(numPointsX-1));
        unitHeight = Math.ceil(window.innerHeight/(numPointsY-1));

        points = [];

        for(var y = 0; y < numPointsY; y++) {
            for(var x = 0; x < numPointsX; x++) {
                points.push({x:unitWidth*x, y:unitHeight*y, originX:unitWidth*x, originY:unitHeight*y});
            }
        }

        randomize();

        for(var i = 0; i < points.length; i++) {
            if(points[i].originX != unitWidth*(numPointsX-1) && points[i].originY != unitHeight*(numPointsY-1)) {
                var topLeftX = points[i].x;
                var topLeftY = points[i].y;
                var topRightX = points[i+1].x;
                var topRightY = points[i+1].y;
                var bottomLeftX = points[i+numPointsX].x;
                var bottomLeftY = points[i+numPointsX].y;
                var bottomRightX = points[i+numPointsX+1].x;
                var bottomRightY = points[i+numPointsX+1].y;

                var rando = Math.floor(Math.random()*2);

                for(var n = 0; n < 2; n++) {
                    var polygon = document.createElementNS(svg.namespaceURI, 'polygon');

                    if(rando==0) {
                        if(n==0) {
                            polygon.point1 = i;
                            polygon.point2 = i+numPointsX;
                            polygon.point3 = i+numPointsX+1;
                            polygon.setAttribute('points',topLeftX+','+topLeftY+' '+bottomLeftX+','+bottomLeftY+' '+bottomRightX+','+bottomRightY);
                        } else if(n==1) {
                            polygon.point1 = i;
                            polygon.point2 = i+1;
                            polygon.point3 = i+numPointsX+1;
                            polygon.setAttribute('points',topLeftX+','+topLeftY+' '+topRightX+','+topRightY+' '+bottomRightX+','+bottomRightY);
                        }
                    } else if(rando==1) {
                        if(n==0) {
                            polygon.point1 = i;
                            polygon.point2 = i+numPointsX;
                            polygon.point3 = i+1;
                            polygon.setAttribute('points',topLeftX+','+topLeftY+' '+bottomLeftX+','+bottomLeftY+' '+topRightX+','+topRightY);
                        } else if(n==1) {
                            polygon.point1 = i+numPointsX;
                            polygon.point2 = i+1;
                            polygon.point3 = i+numPointsX+1;
                            polygon.setAttribute('points',bottomLeftX+','+bottomLeftY+' '+topRightX+','+topRightY+' '+bottomRightX+','+bottomRightY);
                        }
                    }
                    polygon.setAttribute('fill','rgba(0,0,0,'+(Math.random()/3)+')');
                    var animate = document.createElementNS('http://www.w3.org/2000/svg','animate');
                    animate.setAttribute('fill','freeze');
                    animate.setAttribute('attributeName','points');
                    animate.setAttribute('dur',refreshDuration+'ms');
                    animate.setAttribute('calcMode','linear');
                    polygon.appendChild(animate);
                    svg.appendChild(polygon);
                }
            }
        }

        refresh();

    }

    function randomize() {
        for(var i = 0; i < points.length; i++) {
            if(points[i].originX != 0 && points[i].originX != unitWidth*(numPointsX-1)) {
                points[i].x = points[i].originX + Math.random()*unitWidth-unitWidth/2;
            }
            if(points[i].originY != 0 && points[i].originY != unitHeight*(numPointsY-1)) {
                points[i].y = points[i].originY + Math.random()*unitHeight-unitHeight/2;
            }
        }
    }

    function refresh() {
        randomize();
        for(var i = 0; i < document.querySelector('#bg svg').childNodes.length; i++) {
            var polygon = document.querySelector('#bg svg').childNodes[i];
            var animate = polygon.childNodes[0];
            if(animate.getAttribute('to')) {
                animate.setAttribute('from',animate.getAttribute('to'));
            }
            animate.setAttribute('to',points[polygon.point1].x+','+points[polygon.point1].y+' '+points[polygon.point2].x+','+points[polygon.point2].y+' '+points[polygon.point3].x+','+points[polygon.point3].y);
            animate.beginElement();
        }
        refreshTimeout = setTimeout(function() {refresh();}, refreshDuration);
    }

    function onResize() {
        document.querySelector('#bg svg').remove();
        clearTimeout(refreshTimeout);
        onLoad();
    }

    window.onload = onLoad;
    window.onresize = onResize;
</script>
</html>
